<template>
  <a-card :bordered="false">

    <a-row :gutter="24">
      <a-col :md="3">
        <div class="table-operator">
          <div style="border-color: #0077AA">
            <a-dropdown :trigger="['contextmenu']">
              <a-tree @select="onSelect" :treeData="treeData" :selectedKeys="selectedKeys" @rightClick="rightClick">
              </a-tree>
              <a-menu slot="overlay">
                <a-menu-item key="1" @click="createCate">
                  <a-icon type="folder-add" />
                  <span>创建内容</span>
                </a-menu-item>

                <a-menu-item key="4" v-if="rightItem.id==='0'" @click="initTreeCategory">
                  <a-icon type="reload" />
                  <span>刷新栏目</span>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div>
        </div>
      </a-col>
      <a-col :md="21">
        <a-card :bordered="false" title="内容列表">
          <div slot="extra">
            <a-button type="primary" style="margin-left: 5px" >
              <a-icon type="delete" />批量删除</a-button>
            <a-button type="primary" style="margin-left: 5px" >
              <a-icon type="notification" />批量发布</a-button>
            <a-button type="primary" style="margin-left: 5px" >
              <a-icon type="rollback" />批量撤销发布</a-button>

            <a-button type="primary" style="margin-left: 5px" >
              <a-icon type="double-right" />批量移动</a-button>

            <a-button type="primary" style="margin-left: 5px">
              <a-icon type="redo" />批量生成</a-button>

            <a-button type="primary" style="margin-left: 5px" >
              <a-icon type="clock-circle" />定时发布</a-button>

            <a-radio-group v-model="status" style="margin-left: 5px">
              <a-radio-button value="all">全部</a-radio-button>
              <a-radio-button value="processing">已发布</a-radio-button>
              <a-radio-button value="waiting">待发布</a-radio-button>
            </a-radio-group>
            <a-input-search style="margin-left: 16px; width: 272px;" />
          </div>

          <a-list size="small" :bordered="true">
            <a-list-item :key="index" v-for="(item, index) in contentData">
              <a-list-item-meta>
                <a slot="title"><span v-html="$substr(item.title,10)"></span></a>
                <a-avatar slot="avatar" size="large" shape="square" :src="item.avatar" />
                <a slot="description" v-if="item.description"><span v-html="$substr(item.description,10)"></span></a>
                <a slot="description" v-else><span v-html="$substr(item.subTitle,10)"></span></a>
              </a-list-item-meta>
              <div slot="actions">
                <a-tag color="orange" @click="handleEdit(record)" v-has="{perm:'content:update'}">编辑</a-tag>
              </div>
              <div slot="actions">
                <a-dropdown>
                  <a-menu slot="overlay">
                    <a-tag color="orange" @click="handleEdit(record)" v-has="{perm:'content:update'}">编辑</a-tag>
                    <a-tag color="red" @click="handleDelete(record)" v-has="{perm:'content:delete'}">删除</a-tag>
                    <a-tag color="green" @click="handleTop(record)" v-has="{perm:'content:top'}">置顶</a-tag>
                    <a-tag color="blue" @click="handleView(record)">预览</a-tag>
                  </a-menu>
                  <a>更多
                    <a-icon type="down" /></a>
                </a-dropdown>
              </div>
              <div class="list-content">
                <div class="list-content-item">
                  <span>栏目名称</span>
                  <p v-html="$substr(item.categoryName,3)"></p>
                </div>
                <div class="list-content-item">
                  <span>作者名称</span>
                  <p v-html="$substr(item.author,3)"></p>
                </div>
                <div class="list-content-item">
                  <span>创建时间</span>
                  <p>{{ item.gmtCreate }}</p>
                </div>
                <div class="list-content-item">
                  <span>排序</span>
                  <p>{{ item.sort }}</p>
                </div>
                
                <div class="list-content-item">
                  <span>状态</span>
                  <p>{{ item.status }}</p>
                </div>

                <div class="list-content-item">
                  <a-checkbox >
                  </a-checkbox>
                </div>
              </div>
            </a-list-item>

          </a-list>
          <div style="float: right;margin-top: 10px;margin-bottom: 10px;">
            <a-pagination
              v-model="pageNo"
              :total="total"
              :defaultPageSize="pageSize"
              show-less-items
              :hideOnSinglePage="true"
              @change="changePageNo" />
          </div>
        </a-card>
      </a-col>
    </a-row>
  </a-card>
</template>

<script>
  import {
    treeCategory
  } from '@/api/site/category'
  import {
    page
  } from '@/api/site/content'
  // import handle from './handle'
  import {
    STable
  } from '@/components'
  const data = []
  data.push({
    title: 'Alipay',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
    description: '那是一种内在的东西，',
    owner: '付晓晓',
    startAt: '2018-07-26 22:44',
    progress: {
      value: 90
    }
  })
  data.push({
    title: 'Angular',
    description: '希望是一个好东西，也',
    owner: '曲丽丽',
    startAt: '2018-07-26 22:44',
    progress: {
      value: 54
    }
  })
  data.push({
    title: 'Ant Design',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
    description: '生命就像一盒巧克力，  ',
    owner: '林东东',
    startAt: '2018-07-26 22:44',
    progress: {
      value: 66
    }
  })
  data.push({
    title: 'Ant Design Pro',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
    description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
    owner: '周星星',
    startAt: '2018-07-26 22:44',
    progress: {
      value: 30
    }
  })
  data.push({
    title: 'Bootstrap',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
    owner: '吴加好',
    startAt: '2018-07-26 22:44',
    progress: {
      status: 'exception',
      value: 100
    }
  })
  data.push({
    title: 'Bootstrap',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
    owner: '吴加好',
    startAt: '2018-07-26 22:44',
    progress: {
      status: 'exception',
      value: 100
    }
  })
  data.push({
    title: 'Bootstrap',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
    owner: '吴加好',
    startAt: '2018-07-26 22:44',
    progress: {
      status: 'exception',
      value: 100
    }
  })
  data.push({
    title: 'Bootstrap',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
    owner: '吴加好',
    startAt: '2018-07-26 22:44',
    progress: {
      status: 'exception',
      value: 100
    }
  })
  data.push({
    title: 'Bootstrap',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
    owner: '吴加好',
    startAt: '2018-07-26 22:44',
    progress: {
      status: 'exception',
      value: 100
    }
  })
  data.push({
    title: 'Bootstrap',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
    description: '那时候我只会想自己想要什么，从不想自己拥有什么',
    owner: '吴加好',
    startAt: '2018-07-26 22:44',
    progress: {
      status: 'exception',
      value: 100
    }
  })
  export default {
    name: 'TableList',
    components: {
      STable
      // handle
    },
    props: {
      statusFilter: {
        type: Function,
        default: undefined
      }
    },
    data () {
      return {
        mdl: {},
        advanced: false,
        treeData: [],
        selectedKeys: ['0'],
        rightItem: {},
        dropdownVisible: false,
        status: 'all',
        queryParam: {
          dto: { categoryId: '0' }
        },
        contentData: [],
        pageNo: 1,
        pageSize: 10,
        total: 0
      }
    },
    created () {
      this.initTreeCategory()
      this.getContents()
    },
    methods: {
      initTreeCategory () {
        treeCategory().then(response => {
          if (response.code === 0) {
            this.treeData = [response.res]
          }
        })
      },
      onSelect (selectedKeys, e) {
        if (e.selected) {
          this.selectedKeys = selectedKeys
        }
        this.queryParam.dto.parentId = e.node.dataRef.id
        this.$refs.table.refresh()
      },
      rightClick (e) {
        this.selectedKeys = [e.node.eventKey]
        this.rightItem = e.node.dataRef
        this.dropdownVisible = true
        this.onSelect(this.selectedKeys, e)
      },
      createCate () {
         // this.$refs.handle.add(this.rightItem)
      },
      handleDelete (record) {
        const that = this
        this.$confirm({
          title: '操作提醒',
          content: '确定要删除吗?',
          onOk () {
            delByPk({
              id: record.id
            }).then(response => {
              that.handleOk()
              that.$message.info(response.msg)
            }).catch((response) => {
              that.$message.warn(response.msg)
            })
          },
          onCancel () {}
        })
      },
      changePageNo (e) {
        alert(11)
      },
      getContents () {
        page({
          pageSize: this.pageSize,
          pageNo: this.pageNo,
          dto: this.queryParam.dto
        }).then(response => {
          if (response.code === 0) {
            this.contentData = response.res.rows
            this.total = response.res.total
          }
        })
      },
      handleEdit (record) {
        this.$refs.handle.edit(record)
      },
      handleOk () {
        this.$refs.table.refresh()
        this.initTreeCategory()
      },
      resetSearchForm () {
        this.queryParam = {
          dto: {}
        }
        this.handleOk()
      }
    }
  }
</script>
<style lang="less" scoped>
  .ant-avatar-lg {
    width: 48px;
    height: 48px;
    line-height: 48px;
  }

  .list-content-item {
    color: rgba(0, 0, 0, .45);
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    margin-left: 115px;

    span {
      line-height: 20px;
    }

    p {
      margin-top: 4px;
      margin-bottom: 0;
      line-height: 22px;
    }
  }
</style>
